<template>
  <div class="main">
    <div class="bar-top cl">
      <ul class="to-top">
        <li>
          <dl>
            <dt>产品</dt>
            <dd>整柜</dd>
            <dd>拼柜</dd>
            <dd>空运</dd>
            <dd>快递</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>关于我们</dt>
            <dd>公司简介</dd>
            <dd>公司历程</dd>
            <dd>公司分布</dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>接触</dt>
          </dl>
        </li>
      </ul>
    </div>
    <div class="bar-bottom">
      <ul class="to-top1">
        <li>
          <dl>
            <dt>大森林全球物流总部</dt>
            <dd>
              <p>电话: 15625053571</p>
              <p>地址: 广东省深圳市南山区桃源街道平山社区珠光北路88号明亮科技园1栋501室</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>上海分公司</dt>
            <dd>
              <p>电话: 15919872500</p>
              <p>地址: 上海市闵行区泰虹路万科时一区T1栋503室</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>广州分公司</dt>
            <dd>
              <p>电话: 13480762523</p>
              <p>地址: 广州市白云区鹤龙二横路3号鹤丰工业园D栋117</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>厦门分公司</dt>
            <dd>
              <p>电话: 15811927215</p>
              <p>地址: 厦门市湖里区长乐路1号海发商务大厦B111</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>宁波分公司</dt>
            <dd>
              <p>电话: 15706878597</p>
              <p>地址: 浙江宁波市鄞州区福明街道FSV金融硅谷10栋22楼2207室</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>杭州分公司</dt>
            <dd>
              <p>电话: 15720941050</p>
              <p>地址: 杭州市余杭区仓前街道文一西路1378号杭州师范大学科技园E幢3楼303室</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>义乌分公司</dt>
            <dd>
              <p>电话: 13129580755</p>
              <p>地址: 浙江省义乌市北苑街道凌云二区87栋二单元一楼</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>长沙分公司</dt>
            <dd>
              <p>电话: 18570612304</p>
              <p>地址: 长沙市岳麓区学士街道学士路8号长沙岳麓科技产业园智客空间一楼</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>中山分公司</dt>
            <dd>
              <p>电话: 13480762523</p>
              <p>地址: 广东省中山市西区街道建业三路1号先凯科技园4楼</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>青岛分公司</dt>
            <dd>
              <p>电话: 18364289786</p>
              <p>地址: 青岛市李沧区四流中路46号青岛跨境电商产业园内B8-113</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>长沙分公司</dt>
            <dd>
              <p>电话: 18570612304</p>
              <p>地址: 长沙市岳麓区学士街道学士路8号长沙岳麓科技产业园智客空间一楼</p>
            </dd>
          </dl>
        </li>
        <li>
          <dl>
            <dt>法国分公司</dt>
            <dd>
              <p>电话: +33-659948769</p>
              <p>地址: 7 rue des mardeaux,41000,villebarou,france</p>
            </dd>
          </dl>
        </li>
        <li style="width: calc(50% - 30px);">
          <dl>
            <dt>美西分公司</dt>
            <dd>
              <p>电话: 626-560-6472</p>
              <p>地址: Forest Shipping USA Inc. 8767 Rochester AveRancho Cucamonga ,CA 91730</p>
            </dd>
          </dl>
        </li>
        <li style="width: calc(50% - 30px);">
          <dl>
            <dt>Forest Shipping USA Inc (NYC Branch)</dt>
            <dd>
              <p>电话: +1-6265862944</p>
              <p>地址: Building 5AB,Terminal Way, Avenel, New Jersey 07001</p>
            </dd>
          </dl>
        </li>

      </ul>




    </div>
  </div>
</template>

<script>
export default {
  name: 'Bar',
  data () {
    return {
    }
  },
  mounted () {
  },
  watch: {
  }
}
</script>

<style scoped>
  .main {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(11, 52, 20, 0.8);
    background-size: cover;
    padding-top: 20px;
    height: calc(100vh - 115px);
    position: fixed;
    z-index: 999999999;
    top: 95px;
    width: calc(100% - 2px);
    left: 0;
  }

  ul li {
    width: calc(25% - 30px);
    float: left;
    margin-right: 30px;
    list-style: none;
  }

  dl dt {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #fff;
    display: inline-block;
    /*line-height: 40px;*/
    padding-bottom: 17px;
  }

  dl dd {
    margin: 15px 0;
  }

  .bar-top {
    border-bottom: 1px solid #fff;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .bar-top,.bar-bottom {
    width: 1200px;
    margin: 0 auto;
  }

  .bar-bottom {
    margin-top: 20px;
  }

  .bar-bottom ul li {
    margin-bottom: 25px;
  }

  .to-top {
    position: relative;
    animation: toTop 2s;
    opacity: 0;
    -webkit-animation: toTop 2s; /* Safari 与 Chrome */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }

  .to-top1 {
    position: relative;
    animation: toTop 2s;
    opacity: 0;
    -webkit-animation: toTop 2s; /* Safari 与 Chrome */
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
  }


  @keyframes toTop
  {
    from {
      bottom: -50px;
      opacity: 0;
    }
    to {
      bottom: 0px;
      opacity: 1;
    }
  }

  @-webkit-keyframes toTop
  {
    from {
      bottom: -50px;
      opacity: 0;
    }
    to {
      bottom: 0px;
      opacity: 1;
    }
  }

</style>
